<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width,user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimun-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="http://download.fengyouhui.net/globalCSS/global.css">
    <!-- <script type="text/javascript" src="http://download.fengyouhui.net/globalJS/jquery-1.7.2.min.js"></script> -->
    <script type="text/javascript" src="http://download.fengyouhui.net/globalJS/global_750.js"></script>
    <link rel="stylesheet" href="http://download.fengyouhui.net/fyh_wechat/Zhuyb/common_css/zyb1.css">
    <link rel="stylesheet" href="http://download.fengyouhui.net/fyh_wechat/Zhuyb/common_css/zybStyle.css">
    <title>问卷列表</title>
    <style>
        html,
        body {
            background: #F6F6F6;
            float: left;
            width: 100%;
        }

        .wrap {
            width: 100%;
            float: left;
            margin-top: 0.2rem;
        }

        .questionnaire_list {
            width: 92%;
            /* height: 11.1rem; */
            float: left;
            margin-left: 4%;
            background: #fff;
            border-radius: .2rem;
            margin-top: 1rem;
            position: relative;
        }

        .questionnaire_list_name {
            width: 76%;
            float: left;
            line-height: 2.4rem;
            margin-top: 1.5rem;
            font-size: 1.7rem;
            font-weight: 500;
            color: #202020;
            margin-left: 1.4rem;
        }

        .questionnaire_list_termOfValidity {
            width: 100%;
            line-height: 2rem;
            float: left;
            font-size: 1.4rem;
            color: #909090;
            text-indent: 1.4rem;
            margin-top: .5rem;
        }

        .questionnaire_list_money {
            width: 100%;
            float: left;
            font-size: 1.4rem;
            color: #202020;
            font-weight: 400;
            margin-top: 0.95rem;
            text-indent: 1.4rem;
            margin-bottom: 1.65rem;
        }

        .questionnaire_list_money>a {
            color: #FF6232;
        }

        .questionnaire_list_cornerMarker {
            width: 5.65rem;
            height: 2.35rem;
            position: absolute;
            top: 0rem;
            right: 0rem;
            background: #FFECE6;
            border-radius: 0rem 0rem 0rem 1.2rem;
            font-size: 1.4rem;
            color: #FF6232;
            text-align: center;
            line-height: 2.35rem;
        }

        .questionnaire_list_state {
            width: 7rem;
            height: 3.2rem;
            position: absolute;
            line-height: 3.2rem;
            text-align: center;
            font-size: 1.5rem;
            color: #2173F9;
            border: 0.1rem solid #2173F9;
            right: 1.1rem;
            bottom: 1.1rem;
            border-radius: 0.35rem;
        }

        .elastic_frame {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0rem;
            left: 0rem;
            background: rgba(0, 0, 0, 0.3);
        }

        .elastic_frame_box {
            width: 30rem;
            height: 17rem;
            margin: 22rem auto;
            background: #fff;
            border-radius: .7rem;
            position: relative;
            overflow: hidden;
        }

        .elastic_frame_box_tit {
            width: 100%;
            color: #202020;
            font-size: 1.8rem;
            line-height: 2.5rem;
            float: left;
            margin-top: 1.9rem;
            text-align: center;
        }

        .elastic_frame_box_text {
            width: 100%;
            float: left;
            color: #606060;
            font-size: 1.5rem;
            margin-top: 1.6rem;
            text-align: center;
        }

        .elastic_frame_box_hide {
            width: 100%;
            height: 5rem;
            position: absolute;
            left: 0rem;
            bottom: 0rem;
            border-top: .1rem solid #DDDDDD;
            text-align: center;
            color: #2173F9;
            font-size: 1.8rem;
            line-height: 5rem;
        }

        .noMessage {
            width: 16.7rem;
            height: 14.1rem;
            display: block;
            margin: 20rem auto 0rem;
        }

        .noMessage_text {
            width: 100%;
            text-align: center;
            color: #202020;
            font-size: 1.7rem;
            margin-top: -5rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <template>
            <div class="wrap">

                <div v-for="(item, index) in data" :key="index" class="questionnaire_list">
                    <div class="questionnaire_list_name">{{ item.paperName }}</div>
                    <div class="questionnaire_list_termOfValidity">有效期：<a v-if="item.effType == 1"
                            style="color: #909090;">长期有效</a><a v-if="item.effType == 2"
                            style="color: #909090;">{{item.begTimeStr}}~{{ item.endTimeStr }}</a>
                    </div>
                    <div class="questionnaire_list_money">邦指数：<a> {{ item.paperMoney }} </a></div>
                    <div class="questionnaire_list_cornerMarker" v-if="item.paperStatus == 0">未填写</div>
                    <div class="questionnaire_list_cornerMarker" v-if="item.paperStatus == 1"
                        style="background: #CAF0D7;color:#43BB6B;">已完成</div>
                    <div class="questionnaire_list_cornerMarker" v-if="item.paperStatus == 2"
                        style="background: #E1E1E1;color:#8E8E8E;">已过期</div>
                    <div class="questionnaire_list_state" @click="answer(item.paperUrl,item.doctorName,item.doctorId)"
                        v-if="item.paperStatus == 0">去填写</div>
                    <div class="questionnaire_list_state" v-if="item.paperStatus == 2"
                        @click="reapply(item.paperMoney,item.taskId)">重新申请</div>
                </div>
                <!-- v-if="data.length <= 0" -->
                <div style="width: 100%;float: left;font-size: 1.5rem;color: #606060;line-height: 8rem;text-align: center;"
                    v-if="data.length <= 0">
                    <img src="http://download.fengyouhui.net/fyh_wechat/common_imgs/noMessage.png" class="noMessage"
                        alt="">
                    <div class="noMessage_text">暂无相关内容</div>
                </div>
                <div style="width: 100%;float: left;font-size: 1.5rem;color: #606060;line-height: 6rem;text-align: center;"
                    v-if="loadShow && data.length > 0">
                    <img src="http://download.fengyouhui.net/fyh_wechat/common_imgs/loading.gif"
                        style="width: 2rem;height: 2rem;padding-top:.6rem" alt=""> 加载中
                </div>
                <div style="width: 100%;float: left;font-size: 1.5rem;color: #606060;line-height: 8rem;text-align: center;"
                    v-if="noMore">
                    没有更多了~~</div>
            </div>
            <div class="elastic_frame" v-if="elasticframeShow">
                <div class="elastic_frame_box">
                    <div class="elastic_frame_box_tit">重新申请失败</div>
                    <div class="elastic_frame_box_text">请联系客服电话<a href="tel:400-886-8282"
                            style="color:#2173F9;">400-886-8282</a>进行咨询</div>
                    <div class="elastic_frame_box_hide" @click="elasticframeShow = false">关闭</div>
                </div>
            </div>
        </template>
    </div>
    <!-- <script type="text/javascript" src="http://download.fengyouhui.net/fyh_wechat/common_js/globalTools.js"></script> -->
    <script src="https://download.fengyouhui.net/fyh_libs/libs/vue.min.js"></script>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="https://download.fengyouhui.net/fyh_libs/libs/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
    <script type="text/javascript" src="https://download.fengyouhui.net/globalUtils/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="http://download.fengyouhui.net/globalUtils/wxjssdk.js"></script>
    <script type="text/javascript" src="http://download.fengyouhui.net/globalUtils/wxConfig.js"></script>
    <script>
        var app = new Vue({
            name: '邀请调研',
            el: '#app',
            data: function () {
                return {
                    getListFlag: true,
                    loadShow: false,
                    elasticframeShow: false,
                    data: [],
                    noMore: false,
                    doctorId: '',
                    pageIndex: 0, // 第几页
                    urlpro: 'http://youyibang.fengyouhui.net/', // 正式环境
                     //urlpro: 'http://test.fengyouhui.net/yyb/' // 测试环境废弃
                     //urlpro: 'https://devyybapp.fengyouhui.net/'// 测试环境
                }
            },
            mounted: function () {
                window.onpageshow = function (event) {
                    if (event.persisted) {
                        window.location.reload();
                    }
                };
                this.doctorId = this.GetQueryString('doctorCiphertext') || '' // SqjFq3GuRXqGEHKYqxWa8w
                this.ListQuery()
                // $(window).bind("scroll", this.Paging)
                window.addEventListener("scroll", this.Paging)
                wx.ready(function () {
                    wx.hideAllNonBaseMenuItem();
                })
            },
            methods: {
                answer(url, doctorName, doctorId) { // 去填写
                    // console.log(window.location.href)
                    // window.location.href = url + '&userId=' + doctorId + '&userName=' + doctorName + '&ext=' + '';
                    // localStorage.setItem('url',window.location.href)  
                    // location.replace(url + '&userId=' + doctorId + '&userName=' + doctorName + '&ext=' + '' + '&backUrl=' + window.location.href)
                    window.location.href = url + '&userId=' + doctorId + '&userName=' + doctorName + '&ext=' + '' + '&backUrl=' + window.location.href

                },
                reapply(paperMoney, taskId) { // 重新申请
                    axios.post(this.urlpro + 'pvq/againApply', Qs.stringify({
                        doctorCiphertext: this.doctorId,
                        paperMoney: paperMoney,
                        taskId: taskId
                    })
                    ).then(res => {
                        console.log(res.data.code)
                        if (res.data.code == 0) {
                            this.pageIndex = 0
                            this.data = []
                            this.loadShow = false
                            this.noMore = false
                            this.ListQuery()
                        } else {
                            this.elasticframeShow = true
                        }
                    }).catch(error => {
                        console.log(error);
                    });
                },
                Paging: function () {
                    //真实内容的高度
                    var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
                    //视窗的高度
                    var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
                    //隐藏的高度
                    var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
                    //如果满足触发条件，执行
                    if (pageHeight - viewportHeight - scrollHeight > 0 && pageHeight - viewportHeight - scrollHeight < 40) {
                        // if (this.getListFlag) {
                        this.ListQuery();//查询方法
                        // }
                        // console.log(123)
                    }
                },
                ListQuery() {
                    if (this.noMore || this.loadShow) return
                    this.getListFlag = false
                    this.loadShow = true // 加载中
                    axios.post(this.urlpro + 'pvq/questionnaireList', Qs.stringify({
                        doctorCiphertext: this.doctorId,
                        pageIndex: this.pageIndex,
                        pageCount: 10
                    })
                    ).then(res => {
                        this.loadShow = false
                        console.log(res.data.data.list)
                        for (let i = 0; i < res.data.data.list.length; i++) {
                            this.data.push(res.data.data.list[i])
                        }
                        if (res.data.data.list.length <= 0 && this.pageIndex > 0) {
                            this.noMore = true // 没有更多了
                        }
                        this.pageIndex = this.pageIndex + 10

                    }).catch(error => {
                        console.log(error);
                    }).finally(() => {
                        // setTimeout(() => {
                        //     this.getListFlag = true
                        // }, 100)
                    })

                },
                GetQueryString: function (name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]); return null;
                }
            }

        });
    </script>
</body>

</html>